<template>
  <section class="bottom-com">
    <div class="container d-none d-md-block d-lg-block">
      <h2 class="title">快速导航</h2>
      <div class="wrap">
        <div class="link">
          <h2>科室介绍</h2>
          <ul>
            <li :key="index" v-for="(item,index) in options.departments">
              <a :href="`#/zhuanke/${item.id}`">{{item.departmentName}}</a>
            </li>
          </ul>
        </div>
        <div class="link ">
          <div class="link-about">
            <h2>关于我们</h2>
            <ul>
              <li v-for="a in options.about"><a :href="`#/about/allad/${a.typeCode}`">{{a.typeName}}</a></li>
            </ul>
          </div>
        </div>
        <div class="link">
          <h2>友情链接</h2>
          <ul>
            <li :key="index" v-for="(item,index) in options.footer.links">
              <a target="_blank" :href="item.link">{{item.name}}</a>
            </li>
          </ul>
        </div>
        <div class="link">
          <h2>医院咨询热线</h2>
          <h3 class="phone">{{options.header.hotline}}</h3>
          <p v-if="!options.footer.weekday" class="time">周一至周五8:00-17:30<br/>周六8:00-12:00</p>
          <p v-if="options.footer.weekday" class="time">{{options.footer.weekday}}</p>
          <p v-if="options.footer.weekend" class="time">{{options.footer.weekend}}</p>
          <p v-if="false" class="contact" @click="go(options.company)">全年365天 在线咨询</p>
        </div>
        <div class="link code">
          <img class="mr-3" :src="getUrl(options.company.qrCode)"/>
          <ul>
            <li>扫描最新优惠</li>
            <li>手机随时挂号</li>
            <li>医院实时资讯</li>
            <li>医院官方微信公众号:</li>
            <li>{{options.company.officialAccount}}</li>
          </ul>
        </div>
      </div>
      <p class="bottom-text">
        {{options.footer.copyright}}<a href="http://www.beian.gov.cn">{{options.footer.beian}}</a> 互联网医疗卫生许可证（经营性）
      </p>
    </div>
    <div class="d-sm-block d-md-none d-lg-none mobile-bottom">
      <div class="link code">
        <ul>
          <li>扫描最新优惠</li>
          <li>手机随时挂号</li>
          <li>医院实时资讯</li>
          <li>医院官方微信公众号:</li>
          <li>{{options.company.officialAccount}}</li>
        </ul>
        <img :src="getUrl(options.company.qrCode)"/>
      </div>
      <div class="logo">
        <div>
          <img class="mr-4 hand" :src="getUrl(options.company.zongbuLogo ? options.company.zongbuLogo : 'logo.png')"/>
        </div>
        <div>
          <img :src="getUrl('qianjing_logo.png')"/>
        </div>
      </div>
      <p class="bottom-text">
        {{options.footer.copyright}}<a href="http://www.beian.gov.cn">{{options.footer.beian}}</a> 互联网医疗卫生许可证（经营性）
      </p>
    </div>
  </section>
</template>

<script>

  import aboutNav from "@/datas/aboutNav";

  export default {
    props: ['options'],
    computed: {},
    data() {
      return {
        aboutList: aboutNav.children
      }
    },
    components: {},
    mounted() {

    },
    methods: {
      go(company) {
        if (!this.isNullOrEmpty(company) && !this.isNullOrEmpty(company.qq)) {
          window.open(company.qq);
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .bottom-com {
    background: #F2F2F2;
    .margin(10, 0, 0, 0);
    .title {
      font-family: MicrosoftYaHeiUI;
      font-size: 16/@size;
      color: #444444;
      letter-spacing: 0;
      line-height: 24/@size;
      border-bottom: 1px solid #D0D0D0;
      .padding(20, 0, 20, 20);
      font-weight: bold;
    }
    .wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-top: 15/@size;
    }
    .link-about {
      ul {
        display: flex;
        max-width: 160/@size;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          min-width: 34%;
          text-align: left;
        }
      }
    }
    .link {
      a {
        color: #444444;
        text-decoration: none;
      }
      font-size: 14/@size;
      color: #444444;
      h2 {
        font-family: MicrosoftYaHeiUI-Bold;
        font-size: 14/@size;
        font-weight: bold;
      }
      ul {
        li {
          font-family: MicrosoftYaHeiUI;
          line-height: 1.4;
          a {
            font-size: 13/@size;
          }
        }
      }
      .phone {
        font-family: MicrosoftYaHeiUI-Bold;
        font-size: 18/@size;
        color: #222222;
        letter-spacing: 0;
        line-height: 18/@size;
        font-weight: bold;
      }
      .time {
        font-family: MicrosoftYaHeiUI;
        font-size: 12/@size;
        color: #444444;
      }
      .contact {
        background-image: linear-gradient(-180deg, @theme-color 0%, @icon-color 100%);
        border-radius: 6px;
        .width(160);
        .height(38);
        line-height: 38/@size;
        text-align: center;
        color: #fff;
        font-family: MicrosoftYaHeiUI;
        cursor: pointer;
      }
    }

    .code {
      display: flex;
      img {
        .width(130);
        .height(130);

      }
      ul {
        li {
          font-family: MicrosoftYaHeiUI;
          font-size: 14/@size;
          color: #444444;
          letter-spacing: 0;
          line-height: 1.8;
          &:last-child {
            ont-family: MicrosoftYaHeiUI-Bold;
            font-size: 16/@size;
            color: #222222;
            letter-spacing: 0;
            font-weight: bold;
          }
        }
      }
    }
    .bottom-text {
      font-family: MicrosoftYaHeiUI;
      font-size: 14/@size;
      color: #4A4A4A;
      text-align: center;
      padding: 44/@size 0;
      margin-bottom: 0;
      padding: 40/@size 20/@size;
    }
  }

  @media (min-width: 320px) and (max-width: 767px) {
    .bottom-com {
      .code {
        padding-top: 65/@size;
        display: flex;
        justify-content: space-around;
        ul {
          li {
            font-size: @font-30;
            &:last-child {
              font-size: @font-30;
            }
          }
        }
        img{
          .width(250);
          .height(250);
        }
      }
      .logo{
        display: flex;
        justify-content: space-around;
        padding-top: 50/@size;
        img{
          .height(80);
        }
      }
      .bottom-text {
        margin: 0 auto;
        .width(680);
        font-family: @font-first;
        font-size:@font-20;
        padding: 50/@size 0 120/@size 0;
        line-height: 1.8;
      }
    }
  }

  @media (min-width: 767px) and (max-width: 992px) {
    .link {
      width: 25%;
    }
    .link-about {
      margin-right: 30/@size;
    }
    .code {
      width: 35%;

    }
  }

</style>
